<template>
  <div @mouseenter="inPopover = true" @mouseleave="inPopover = false">
    <el-popover
      placement="top"
      v-model:visible="visible"
      :width="width"
      trigger="contextmenu"
      class="popover-input"
      :teleported="teleported"
      :persistent="false"
      popper-class="!p-0"
    >
      <div class="flex p-3" @click.stop="">
        <div class="popover-input__input mr-[10px] flex-1">
          <el-select
            class="flex-1"
            :size="size"
            v-if="type == 'select'"
            v-model="inputValue"
            :teleported="teleported"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            v-else
            v-model.trim="inputValue"
            :maxlength="limit"
            :show-word-limit="showLimit"
            :type="type"
            :size="size"
            clearable
            :placeholder="placeholder"
          />
        </div>
        <div class="popover-input__btns flex-none">
          <el-button link @click="close">取消</el-button>
          <el-button type="primary" :size="size" @click="handleConfirm"
            >确定</el-button
          >
        </div>
      </div>
      <template #reference>
        <div class="inline" @click.stop="handleOpen">
          <slot></slot>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import { useEventListener } from "@vueuse/core";
import type { PropType } from "vue";

const props = defineProps({
  value: {
    type: String,
  },
  type: {
    type: String,
    default: "text",
  },
  width: {
    type: [Number, String],
    default: "300px",
  },
  placeholder: String,
  disabled: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
  size: {
    type: String as PropType<"default" | "small" | "large">,
    default: "default",
  },
  limit: {
    type: Number,
    default: 200,
  },
  showLimit: {
    type: Boolean,
    default: false,
  },
  teleported: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["confirm"]);
const visible = ref(false);
const inPopover = ref(false);
const inputValue = ref();
const handleConfirm = () => {
  close();
  emit("confirm", inputValue.value);
};
const handleOpen = () => {
  if (props.disabled) {
    return;
  }
  visible.value = true;
};
const close = () => {
  visible.value = false;
};

watch(
  () => props.value,
  (value) => {
    inputValue.value = value;
  },
  {
    immediate: true,
  }
);

useEventListener(document.documentElement, "click", () => {
  if (inPopover.value) return;
  close();
});
</script>

<style scoped lang="scss"></style>
